<!DOCTYPE html>
<html>
<head>
	<title>未知尺寸元素水平垂直居中</title>
	<meta charset="utf-8" />
	<style type="text/css">
	body{ font-family: '微软雅黑'; }
	.box1{ width:300px;height:200px;margin:20px;background:#f62459;text-align: center; }
	.box1:after{
		content: "我是p标签的参照物，把我隐藏就可以实现p的居中";
		display: inline-block;
		vertical-align: middle;
		height:100%;width:40px;background:blue;
		/*visibility: hidden;*/
	}
	.box1 p{ vertical-align: middle;display: inline-block; }
/*-------------------------------------------------------------------------------------*/
	.box2{ width:300px;height:200px;margin:20px;
		background:#f62459;text-align: center; 
		font-size: 0px;
	}
	.box2:after{
		content: "";
		display: inline-block;
		vertical-align: middle;
		height:100%;width:0px;
		/*background:blue;*/
		/*visibility: hidden;*/
	}
	.box2 p{ vertical-align: middle;display: inline-block;font-size: 14px; }	
/*-------------------------------------------------------------------------------------*/
	.box3{ width:300px;height:200px;margin:20px;
		background:#f62459;text-align: center; 
		font-size: 0px;
		word-spacing: -10px;
	}
	.box3 span/*,.box3:after*/{
		display:inline-block;
		*display:inline;
		*zoom:1;
		width:10px;
		height:100%;
		vertical-align:middle;
		background: blue;
	}
	/*.box3:after{ content: ""; }*/
	.box3 p{ display:inline-block;
		*display:inline;
		*zoom:1;
		vertical-align:middle;
		font-size:14px;
		word-spacing: normal;
	}
/*-------------------------------------------------------------------------------------*/
	.desc{ width:100%;min-height:200px;background: #aaa;overflow: auto;text-indent: 2em; }
	</style>
</head>
<body>
	<h3>首先讨论在IE8以上（也就是支持伪元素after的基础上）的2种情况</h3>
	<p>当有一段不知道长度大小的文字在你面前，你需要使它垂直居中的时候，你肯定会想到：<br/>1、text-align:center;水平居中没错。<br/>2、垂直居中，可以使用绝对定位，margin-left,margin-top负值在这里可以实现吗？答案是不可以，因为文字多少你不知道。那么绝对定位就不好使了。<br/>3、还有人应该想到line-height:;这种情况下但是如果这个文字换行了呢？所以也不行。</p>
	<p>那么接下来就是要说的这个问题了，使用display:inline-block;可以实现兼容IE6以上。</p>


<!-- 解释inline-block -->
  <div class="desc">
	<p>那么什么是display:inline-block;？我们来了解了解。。。<br/>早在 IE 5.5 就开始支持 inline-block了，同时我们知道 IE6、7 中 display:inline-block 是可以触发 hasLayout 的，触发了 hasLayout 的元素表现出来的特征就是一个独立的矩形容器，可以设置宽高而且不受外部元素的影响。</p>
	<p>：inline-block 后的元素创建了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素。直白一点的意思就是：inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。简而言之：
inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )</p>
  </div>
<!-- 解释inline-block -->

<!-- 解决了inline-block的间隙问题 -->
	<h3>请看IE8以上使行内元素垂直居中的效果。。。</h3>
	<div class="box1">
		<p>我是一段未知大小的文字。</p>
	</div>
	<p>代码如下：<br/><img src="images/1.png"></p>

	<h3>当元素发生换行之后，应该这样处理。。。</h3>
	<div class="box2">
		<p>我是一段未知大小的文字。如果我是一个长文本的话，会发生什么呢？</p>
	</div>
	<p>代码如下：<br/><img src="images/2.png"></p>
	<p>为什么要这样处理呢？你应该想到，既然是换行了，那就是说明我的这个伪元素after和这段文字不在一个line box里了，应该被挤下去了，如图：<br/><img src="images/3.png"></p>
	<p>有人肯定也已经发现，width已经被设置为0了，应该不会被挤下去啊？这就涉及到了inline-block使元素之间产生间隙，而IE6、7，IE8（Q）中：inline 元素会产生空隙，block 元素不会产生空隙。也就是说，因为这个间隙的存在，就把我这个伪元素参照物给挤下去了。</p>
	<p>在我们这里的处理是，将父级的字体设置为0，将元素的字体设置为正常，就可以去除inline-block产生的间隙。</p>
	<p style="background:#aaa;margin-bottom:100px;">产生间隙的根本原因是：HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是受 font-size 来控制的，字体大小直接导致 inline 或者 inline-block 后元素之间空隙的大小，把 inline-block 元素间的空隙认为总是某个固定大小是错误的。</p>




	<p>这只是在IE8以上的浏览器上，但是，IE8 以上支持 font-size:0;
IE6、7 inline 元素 inline-block 后设置 font-size:0 始终有 1px 的空隙。这里就要用到letter-spacing 和 word-spacing了。<br/>letter-spacing : normal | length （检索或设置对象中的文字之间的间隔）<br/>
word-spacing : normal | length（检索或设置对象中的单词之间插入的空隔）</p>
	<p>Safari 中 letter-spacing 负值的绝对值大于空隙大小后，内部会发生重叠。而word-spacing不会。那就好办了。</p>
	<p style="color:red;margin-bottom:100px;">去除 inline-block 空隙终极解决方案<br/><img src="images/4.png"></p>
<!-- 解决了inline-block的间隙问题  结束 -->



	<p>解决了inline-block的间隙问题，接着前面说的IE8及以下不支持伪元素的办法，我们可以在元素p后设置一个隐藏的span来当作参照物即可。</p>

	<div class="box3">
		<p>这是一段很长的文字，但不知道大小，又换行了，还是在IE8及以下的情况。IE8及以下才能看见居中。可以看到span标签只是个参照物，将line box的高度撑为100%。</p>
		<!--[if lt IE8]><span></span><![endif]-->
	</div>
	<p>代码如下：<br/><img src="images/5.png"></p>

	<h3 style="margin:100px auto;color:red;">终极代码：<br/><img src="images/6.jpg"></h3>
	<p>参考 <br/><a href="http://demo.doyoe.com/css/alignment/">未知尺寸元素水平垂直居中</a><br/><a href="http://www.iyunlu.com/view/css-xhtml/64.html">inline-block 前世今生</a></p>
</body>
</html>